<template>
  <div>
    <a-drawer :visible="show" title="编辑信息" width="484px" @close="onCancel">
      <div class="baseInfo-title">基本信息</div>
      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 13 }">
        <a-form-item label="姓名">
          <a-input v-model="options.name" disabled />
        </a-form-item>
        <a-form-item label="身份证号">
          <a-input v-model="options.idCard" disabled />
        </a-form-item>
        <a-form-item label="个人社保账号">
          <a-input v-model="options.o" disabled />
        </a-form-item>
        <a-form-item label="个人公积金账号">
          <a-input v-model="options.i" disabled />
        </a-form-item>
      </a-form>
      <div class="baseInfo-title">参保信息</div>
      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 13 }">
        <a-form-item label="参保方案">
          <a-select v-model="options.socProgName" @change="handleChange">
            <a-select-option v-for="item in progList" :key="item.id" :value="item.progName">
              {{ item.progName }}
            </a-select-option>
          </a-select>
          <a-col class="primary" @click="editItem(formList)">
            编辑各项基数
          </a-col>
        </a-form-item>
        <a-form-item v-for="item in formList" :key="item.id" :label="item.itemName">
          <a-input-number
            v-model="item.cardinalityDefault"
            :disabled="disabled"
            style="width:100%"
            :min="item.cardinalityMin || 0"
            :max="item.cardinalityMax || 0"
          />
          <a-row type="flex">
            <a-col> 基数范围[{{ `${item.cardinalityMin || 0}-${item.cardinalityMax || 0}` }}]</a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <div class="drawer-footer-box">
        <a-button :style="{ marginRight: '12px' }" @click="onCancel"> 取消</a-button>
        <a-button type="primary" @click="onOk">确认</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
export default {
  name: "EditorModal",
  props: ["show", "options"],
  data() {
    return {
      copyData: {},
      params: {},
      progList: [],
      formList: {},
      publicMoney: {},
      disabled: true
    };
  },
  watch: {
    show(val) {
      if (val) {
        if (this.options) {
          this.params.progName = this.options.socProgName || "";
          this.copyData = JSON.parse(JSON.stringify(this.options));
          if (this.options.socDispatchEmpItemList) {
            this.formList = this.options.socDispatchEmpItemList;
            this.publicMoney = this.formList.find(item => item.itemName.includes("公积金"));
          }
        }
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 编辑每一个
    editItem(item) {
      this.disabled = !this.disabled;
    },
    // 获取参保方案
    getList() {
      this.$request({ url: `/hr/api/v1/socProgs/listAllRelation` }).then(({ data }) => {
        this.progList = data;
      });
    },
    // 选择方案
    handleChange(value) {
      this.formList = this.progList.find(item => item.progName === value);
    },
    // 确定
    onOk() {
      this.disabled = true;
      this.$emit("change", { options: this.options, onOk: true });
    },
    // 取消
    onCancel() {
      this.disabled = true;
      this.$emit("change", { options: this.copyData, onOk: false });
    }
  }
};
</script>

<style>
.baseInfo-title {
  padding: 14px 24px;
  background: rgba(250, 250, 250, 1);
  border-radius: 4px;
  height: 48px;
  margin-bottom: 24px;
}
</style>
